<html>  
  <head>  
        <meta charset="utf-8">  
        <title>10.4.1 弦图</title>  
  <style>

  .outerPath{
	stroke: black;
  }
  
  .outerText{
	text-anchor: middle;
	font-size: 16;
  }
  
  .innerPath{
	stroke: black;
  }
  
  </style>
		
  </head> 

    <body>  
		<script src="../../d3/d3.min.js" charset="utf-8"></script>  
        <script>
		
		var width  = 400;	//SVG绘制区域的宽度
		var height = 400;	//SVG绘制区域的高度
			
		var svg = d3.select("body")			//选择<body>
					.append("svg")			//在<body>中添加<svg>
					.attr("width", width)	//设定<svg>的宽度属性
					.attr("height", height);//设定<svg>的高度属性
		
		//1.确定初始数据

		var continent = [ "亚洲" , "欧洲" , "非洲" , "美洲" , "大洋洲"  ];
		
		// 各州人口的来源，如
		//				亚洲		美洲
		//	亚洲		9000		1000
		//	美洲		7000		500
		// 该矩阵表示：
		// 1.亚洲的人口：有9000是本地人，有1000人是来自美洲的移民，总人口为 9000 + 1000
		// 2.美洲的人口：有500是本地人，有7000人是来自亚洲的移民，总人口为 500 + 7000
		
		var population = [
		  [ 9000,  870　 , 3000　, 1000 , 5200 ],
		  [ 3400,  8000　, 2300　, 4922 , 374  ],
		  [ 2000,  2000　, 7700　, 4881 , 1050 ],
		  [ 3000,  8012  , 5531  , 500  , 400  ],
		  [ 3540,  4310　, 1500  , 1900 , 300 ]
		];

		//2.转换数据
		var chord = d3.layout.chord()
			           .padding(0.03)
			           .sortSubgroups(d3.ascending)
			           .matrix(population);

		console.log(chord.groups());
		console.log(chord.chords());
		
		
		//3.绘制
		
		//弦图的<g>元素
		var gChord = svg.append("g")
						.attr("transform","translate(" + width/2 + "," + height/2 + ")");
		
		//节点的<g>元素
		var gOuter = gChord.append("g");

		//弦的<g>元素
		var gInner = gChord.append("g");

		//颜色比例尺
		var color20 = d3.scale.category20();
		
		//绘制节点
		var innerRadius = width/2 * 0.7;
		var outerRadius = innerRadius * 1.1;
		
		//弧生成器
		var arcOuter =  d3.svg.arc()
					 .innerRadius(innerRadius)
					 .outerRadius(outerRadius);
		
		gOuter.selectAll(".outerPath")
				.data(chord.groups())
				.enter()
				.append("path")
				.attr("class","outerPath")
				.style("fill", function(d) { return color20(d.index); })
				.attr("d", arcOuter );
			
		gOuter.selectAll(".outerText")
				.data(chord.groups())
				.enter()
				.append("text")
				.each( function(d,i) {
					d.angle = (d.startAngle + d.endAngle)/2;
					d.name = continent[i];
				})
				.attr("class","outerText")
				.attr("dy",".35em")
				.attr("transform", function(d){
					var result = "rotate(" + ( d.angle * 180 / Math.PI ) + ")";

					result += "translate(0,"+ -1.0 * ( outerRadius + 10 ) +")" ;
					
					if( d.angle > Math.PI * 3 / 4 &&  d.angle < Math.PI * 5 / 4 )
						result += "rotate(180)";
					
					return result;
				})
				.text(function(d){
					return d.name;
				});
				

		//绘制弦
		var arcInner =  d3.svg.chord()
						.radius(innerRadius);
		
		gInner.selectAll(".innerPath")
			.data(chord.chords())
		    .enter()
			.append("path")
			.attr("class","innerPath")
			.attr("d", arcInner )
		    .style("fill", function(d) { return color20(d.source.index); });
			
		
		 
        </script>  
		
    </body>  
</html>  